/*  1. GENERAL
    ........................................................................................................................................ */

/* 1: Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
body { line-height:1 }
ol, ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none }:focus { outline:0 }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 }
.clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 }
.clearfix { display:inline-block }
* html .clearfix { height:1% }
.clearfix { display:block }


/* 2: Font Face */
@font-face {
    font-family: 'CardoRegular';
    src: url('style/type/Cardo99s-webfont.eot');
    src: url('style/type/Cardo99s-webfont.eot?#iefix') format('embedded-opentype'),
         /*url('style/type/Cardo99s-webfont.woff') format('woff'),
         url('style/type/Cardo99s-webfont.ttf') format('truetype'),*/
         url('style/type/Cardo99s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body { height: 100%; }

/* 3: General Styling */

body { font:  normal 12px 'Helvetica Neue', helvetica, arial, sans-serif; background:#ededed; color: #889397; overflow-y: scroll; overflow-x: hidden; }

/* links ++++++++++++++++++++++++++++++++++++++++++++ */
a { outline: none; text-decoration: none; color: #5f6d72; }
a:hover  { outline: none; text-decoration: none; color: #555;  }
a img { border: none; }

/* button links ++++++++++++++++++++++++++++++++++++++++++++ */
button {
  background: #e3e3e3;
  border: 1px solid #bbb;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font:bold 11px "Helvetica Neue", helvetica, arial, sans-serif;
  text-decoration:none;
  line-height: 1;
  padding: 5px 0 6px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 70px;
}

button:hover {
  background: #d9d9d9;
  -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
  -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
  box-shadow: inset 0 0 1px 1px #eaeaea;
  color: #222;
  cursor: pointer;
}

button:hover { cursor: pointer; }
button::-moz-focus-inner { border:0; }

/* bulleted list ++++++++++++++++++++++++++++++++++++++++++++ */
ul.bullet { padding: 0 0 20px 0; display: block; overflow: hidden; }
ul.bullet li { line-height: 22px; list-style: none; display: block; background: transparent url(../style/images/bullet.jpg) no-repeat left 10px; padding-left: 15px; }

/* check list ++++++++++++++++++++++++++++++++++++++++++++ */
ul.check_list { padding: 0 0 20px 0; display: block; overflow: hidden; }
ul.check_list li { line-height: 22px; list-style: none; display: block; background: transparent url(../style/images/tick.png) no-repeat 0px 2px; padding-left: 25px; }

/* quote styling ++++++++++++++++++++++++++++++++++++++++++++ */
/*blockquote {float: left; font-family: Georgia, Times, serif; width: 600px; /* required */ /*margin: 0 auto; font-size: 13px; }*/

#quote_wrap { background: transparent url(../style/images/quote.png) no-repeat 0 8px; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 20px 0 20px 0; padding: 0 0 0 45px;
}

/* 4: Typography */ 

h1  { font: normal 24px "CardoRegular", serif;
 background: transparent url(../style/images/line.png) repeat-x 0px 30px; display: block; color: #555; padding: 8px 0px 32px 0px; margin-bottom: 30px; height: 1px;
text-shadow:1px 1px 0px #fcfcfc; letter-spacing: 1px;
}

h2 { font: normal 17px "CardoRegular", serif; margin-bottom: 10px; color: #869397; }
h3 { font: normal 15px "CardoRegular", serif; margin-bottom: 10px; margin-top: 2px; color: #869397; }
h4 { font-size: 12px; font-weight:normal; color: #869397; margin-bottom:10px; }

/* 1: Header */ 

/* top strip  ++++++++++++++++++++++++++++++++++++++++++++ */
#strip { height: 150px; }
#strip img{
  display: block;
  margin:0 auto;
  padding-top: 20px;
}
/*personal-nav*/
.personalnav{
  width: 100%;
  min-width: 960px;
  height: 14px;
  margin:0 auto;
  background-color: #fff;
}
/* container ++++++++++++++++++++++++++++++++++++++++++++ */
#container { min-height: 100%; height: auto !important; height: 100%; padding: 0px 0px; margin: -70px auto -57px; }


/* header ++++++++++++++++++++++++++++++++++++++++++++ */
#header {width: 960px; height: 45px; margin: 0px auto 80px auto; }

/* social links ++++++++++++++++++++++++++++++++++++++++++++ */
ul.social {margin: 20px 10px 0px 0px; float: right; }
ul.social li  { float: right; padding: 0px 8px 0px 0px; }
ul.social a  { border:none;}

/* logo ++++++++++++++++++++++++++++++++++++++++++++ */

/* 2: Menu */

ul#tab-menu { float:left; width: 210px; background-color: transparent; font: normal 15px "CardoRegular", serif; 
margin: 0px 10px 0 0; padding: 38px 60px 0px 0px; list-style: none; 
}

ul#tab-menu li { border-top:1px dotted #bbb; cursor: pointer; padding: 10px 15px; margin: 0; color: #6B777C;
}
ul#tab-menu li:hover{ color: #54BBDD; }
ul#tab-menu li.selected { color:  #6B777C; background: url(../style/images/red_ribbon.png) no-repeat 182px -3px;
}
/* Hack for IE \*/
* html .ddsmoothmenu { height: 1%; } 
/*Holly Hack for IE7 and below*/

/* 3: Content */

/* content wrapper ++++++++++++++++++++++++++++++++++++++++++++ */
#wrapper { width: 1200px; margin: 0 auto; padding: 0px 0px ; line-height: 20px; }

/* content ++++++++++++++++++++++++++++++++++++++++++++ */
.tab-content { line-height: 22px;padding-bottom:80px; background:transparent; width: 980px; float: left; }
.tab-content div.tab { display: none; padding: 0; }
.tab-content div.tab.show { display: block; }
.tab-content div.tab p { width: 660px; overflow: hidden; padding: 0; margin: 0 0 15px 0;  }
.tab-content div.tab div p { width: 100%; }

/*个人资料样式*/
.red{color:#ff0000;font-family:"宋体";font-weight:normal;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}

#formbox{padding:20px;margin:20px auto;width:600px;}
#formbox .item{padding-top:5px;height:50px;overflow:hidden;line-height:26px;}
#formbox .label{width:100px;text-align:right;font-size:14px;float: left;}
#formbox .span-150{width:150px;}
#formbox .text{width:240px;padding:4px 3px;border:1px solid #bbb;font-size:14px;font-family:arial,"宋体";}
#formbox .text-1{width:100px;}
#formbox .blank{width:16px;height:16px;margin:2px 5px 0;}
#formbox .succeed{background:url(../images/pwdstrength.gif) no-repeat -105px 0;}
#formbox .yellow_button{font-size:14px;font-weight:bold;color:#fff;border:none;cursor:pointer;}

/*  我的收藏
    ........................................................................................................................................ */

/* 1: Sortable Gallery - (inner_tab is the styling for tabs on all pages */
#portfolio ul li { padding: 0;margin-bottom:12px; }
#wrapper ul.grid { width: 680px; overflow: hidden; margin: -20px 0 0px -21px; padding: 12px; }
ul.grid:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; }
ul.grid li { width: 155px; height: 102px;border:1px solid #ccc; margin-left: 10px; float: left; overflow: hidden; background: #fafafa; 
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
ul.grid li a { outline:0;  }
ul.grid li img { display: block; width: 145px; height: 92px; margin: 5px 0px 0px 5px; }
ul.gallerynav, ul.inner_tab { width: 660px;
 margin: 0 auto 38px -17px ; height: 14px; }
ul.gallerynav li, ul.inner_tab li{ float: left; border-right: 1px dotted #bebebe; }
ul.gallerynav li a, ul.inner_tab li a { float: left;text-transform: uppercase; font: normal 11px "Helvetica Neue", helvetica, arial, sans-serif; 
color: #6B777C; 
margin: 0px 3px 0px 3px; padding: 0px 12px 0px 12px; }
ul.gallerynav li a:hover, ul.inner_tab li a:hover { text-decoration: none; color: #54bbdd; }
ul.gallerynav li.selected-1 a { color: #5d8ba6; }
.hidden { display: none; }

/* 2: Featured Work - Slide Thumb Gallery */
#preview_wrap {margin: -5px auto 0px auto; padding-top: 14px;
width: 660px; height: 289px; background: url('../style/images/slider.png') top left no-repeat; }
#preview_outer { overflow: hidden; width: 620px; height: 232px;margin:0px auto; position: relative; }
#preview_inner { text-align: left; height: 100%; position: relative; }
#preview_inner div { float: left; width: 620px; height: 232px; position: relative; }
#preview_inner div a { position: absolute; bottom: 0; left: 0;	 display: block;
width: 100%; text-indent: 20px; padding: 3px 0; color: #bbb; background: url(../style/images/bg_trans.png); text-decoration: none; font-size: 14px; }
#preview_inner div a:hover { color: #ccc; }

#thumbs { position: relative; width: 660px; text-align: center;	}
#thumbs span {margin: -19px 0px 15px 10px; padding: 3px; width: 40px; height: 40px; cursor: pointer; border: 1px solid #ccc; background: #fafafa; 
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
display: inline-block;
} 
#arrow { position: absolute; top: -43px; background: url(../style/images/slide_thumb_arrow.png) no-repeat 0px 0px; width: 68px; height: 27px; display: none;
}
/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner , input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner 
{ border : 0px; } 
/*for IE8 */
input[type="reset"]:focus, input[type="button"]:focus , input[type="submit"]:focus, input[type="button"]:focus
{ outline : none; }

/* 6: Footer */

#footer-wrapper, .push { height: 57px; clear: both;/* .must be the same height as .footer */ }
#footer-wrapper { height: 45px; padding-top:10px; }
#footer { min-width: 960px; height: 45px; background: #1e1e1e; border-top: 2px solid #999; }
#footer-content a{ border:none; color: #aaa; }
#footer-content a:hover{border:none; color: #ccc; }
#footer-content { width: 960px; height: 45px; margin: 0 auto; position: relative; }
#copyright { float: left; position: absolute; top: 18px;left: 0; }
#copyright p { font-size: 11px; margin: 0; }
#back-top {float: right; position: relative; top: 16px; }

